<template>
	<view class="container">
		<view class="top">
			<u-icon name="arrow-left" color="#fff" size="30" @click="return_btn()"></u-icon>
			<u--text text="我的订单" align="center" color="#fff" size="22" margin="4vh 0 0 0"></u--text>
		</view>
		<view class="bgtop"></view>
		<view class="bar">
			<view v-for="(tab, index) in tabs" :key="index" class="barinfo" :class="{ 'active': activeTab === index }"
				@click="handleTabClick(index)">
				{{ tab }}
			</view>
		</view>

		<!-- <view class="card">
			<view class="head1">
				<u--text text="订单号:2021010831213"></u--text>
				<u--text suffixIcon="arrow-right" align="right" color="red"></u--text>
			</view>
			<view class="hr"></view>
			<view class="orderinfo">
				<u--text text="服务项目: 车辆保养" margin='10rpx' size='12px'></u--text>
				<view class="orderinfo1">
					<u--text text="服务门店:大宝车辆维修店" suffixIcon="pushpin-fill" margin="10rpx" size='12px'></u--text>
					<u--text bold='true' text="待评价 " align='right' margin="10rpx" size='12px' color='blue'></u--text>
				</view>
				<u--text text="下单时间: 2023-03-12 12:09" margin='10rpx' size='12px'></u--text>
				<view class="orderinfo1">
					<u--text text="应付: 230.56元" margin='10rpx' size='12px'></u--text>
					<u-button type="primary" size="small" :customStyle='btnys'>立即评价</u-button>
					<u-button type="primary" size="small" :customStyle='btnys'>再来一单</u-button>
				</view>
			</view>
		</view>

		<view class="card">
			<view class="head1">
				<u--text text="订单号:2021010831213"></u--text>
				<u--text suffixIcon="arrow-right" align="right" color="red"></u--text>
			</view>
			<view class="hr"></view>
			<view class="orderinfo">
				<u--text text="服务项目: 车辆保养" margin='10rpx' size='12px'></u--text>
				<view class="orderinfo1">
					<u--text text="服务门店:大宝车辆维修店" suffixIcon="pushpin-fill" margin="10rpx" size='12px'></u--text>
					<u--text bold='true' text="已取消 " align='right' margin="10rpx" size='12px' color='#c0c0c0'></u--text>
				</view>
				<u--text text="下单时间: 2023-03-12 12:09" margin='10rpx' size='12px'></u--text>
				<view class="orderinfo1">
					<u--text text="应付: 230.56元" margin='10rpx' size='12px'></u--text>
					<u-button type="primary" size="small" :customStyle='btnys'>重新下单</u-button>
				</view>
			</view>
		</view>

		<view class="card">
			<view class="head1">
				<u--text text="订单号:2021010831213"></u--text>
				<u--text suffixIcon="arrow-right" align="right" color="red"></u--text>
			</view>
			<view class="hr"></view>
			<view class="orderinfo">
				<u--text text="服务项目: 车辆保养" margin='10rpx' size='12px'></u--text>
				<view class="orderinfo1">
					<u--text text="服务门店:大宝车辆维修店" suffixIcon="pushpin-fill" margin="10rpx" size='12px'></u--text>
					<u--text bold='true' text="已退款 " align='right' margin="10rpx" size='12px' color='#c0c0c0'></u--text>
				</view>
				<u--text text="下单时间: 2023-03-12 12:09" margin='10rpx' size='12px'></u--text>
				<view class="orderinfo1">
					<u--text text="应付: 230.56元" margin='10rpx' size='12px'></u--text>
					<u-button type="primary" size="small" :customStyle='btnys'>再来一单</u-button>
				</view>
			</view>
		</view>

		<view class="card">
			<view class="head1">
				<u--text text="订单号:2021010831213"></u--text>
				<u--text suffixIcon="arrow-right" align="right" color="red"></u--text>
			</view>
			<view class="hr"></view>
			<view class="orderinfo">
				<u--text text="服务项目: 车辆保养" margin='10rpx' size='12px'></u--text>
				<view class="orderinfo1">
					<u--text text="服务门店:大宝车辆维修店" suffixIcon="pushpin-fill" margin="10rpx" size='12px'></u--text>
					<u--text bold='true' text="已完成 " align='right' margin="10rpx" size='12px' color='blue'></u--text>
				</view>
				<u--text text="下单时间: 2023-03-12 12:09" margin='10rpx' size='12px'></u--text>
				<view class="orderinfo1">
					<u--text text="应付: 230.56元" margin='10rpx' size='12px'></u--text>
					<u-button type="primary" size="small" :customStyle='btnys'>再来一单</u-button>
				</view>
			</view>
		</view> -->

		<view class="card" v-for="order in filteredOrders" :key="order.id">
			<view class="head1">
				<u--text :text="'订单号:' + order.id"></u--text>
				<u--text suffixIcon="arrow-right" align="right" color="red"></u--text>
			</view>
			<view class="hr"></view>
			<view class="orderinfo">
				<u--text :text="'服务项目: ' + order.service" margin='10rpx' size='12px'></u--text>
				<view class="orderinfo1">
					<u--text :text="'服务门店:' + order.store" suffixIcon="pushpin-fill" margin="10rpx"
						size='12px'></u--text>
					<u--text bold='true' :text="order.status" align='right' margin="10rpx" size='12px'
						:color="getStatusColor(order.status)"></u--text>
				</view>
				<u--text :text="'下单时间: ' + order.time" margin='10rpx' size='12px'></u--text>
				<view class="orderinfo1">
					<u--text :text="'应付: ' + order.amount" margin='10rpx' size='12px'></u--text>
					<u-button @click="returnbtn1" type="primary" size="small" :customStyle='btnys'
						v-if="order.status === '待支付'">去支付</u-button>
					<u-button @click="returnbtn2" type="primary" size="small" :customStyle='btnys'
						v-if="order.status === '待评价'">立即评价</u-button>
					<u-button @click="returnbtn3" type="primary" size="small" :customStyle='btnys'
						v-if="order.status === '待使用'">去使用</u-button>
					<u-button @click="returnbtn4" type="primary" size="small" :customStyle='btnys'
						v-if="order.status === '已取消'">重新下单</u-button>
					<u-button @click="returnbtn5" type="primary" size="small" :customStyle='btnys'
						v-if="order.status === '已退款' || order.status === '已完成'">再来一单</u-button>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				iconstyle: {

				},
				btnys: {
					'width': '200rpx',
					'background-color': ' #0863e7',
					'margin-left': '20rpx',
					'width': '150rpx'
				},
				activeTab: 0, // 默认选中第一个标签
				tabs: ['全部', '待支付', '待使用', '待评价'], // 标签数组
				orders: [{
						id: 1,
						status: '待支付',
						service: '车辆保养',
						store: '大宝车辆维修店',
						time: '2023-03-12 12:09',
						amount: '230.56元'
					},
					{
						id: 2,
						status: '待评价',
						service: '车辆保养',
						store: '大宝车辆维修店',
						time: '2023-03-12 12:09',
						amount: '230.56元'
					},
					{
						id: 3,
						status: '已取消',
						service: '车辆保养',
						store: '大宝车辆维修店',
						time: '2023-03-12 12:09',
						amount: '230.56元'
					},
					{
						id: 4,
						status: '已退款',
						service: '车辆保养',
						store: '大宝车辆维修店',
						time: '2023-03-12 12:09',
						amount: '230.56元'
					},
					{
						id: 5,
						status: '已完成',
						service: '车辆保养',
						store: '大宝车辆维修店',
						time: '2023-03-12 12:09',
						amount: '230.56元'
					},
					{
						id: 6,
						status: '待使用',
						service: '车辆保养',
						store: '大宝车辆维修店',
						time: '2023-03-12 12:09',
						amount: '230.56元'
					},
				]
			}
		},
		computed: {
			filteredOrders() {
				if (this.activeTab === 0) {
					return this.orders; // 全部订单
				}
				const statusMap = {
					1: '待支付',
					2: '待使用',
					3: '待评价'
				};
				return this.orders.filter(order => order.status === statusMap[this.activeTab]);
			}
		},
		methods: {
			handleTabClick(index) {
				this.activeTab = index;
			},
			getStatusColor(status) {
				const colorMap = {
					'待支付': 'blue',
					'待使用': 'blue',
					'待评价': 'blue',
					'已取消': '#c0c0c0',
					'已退款': '#c0c0c0',
					'已完成': 'blue'
				};
				return colorMap[status] || '#000';
			},
			returnbtn1() {
				uni.$u.route('/pages/wpc/myorder/dzfdd/dzfdd');
			},
			returnbtn2() {
				uni.$u.route('/pages/wpc/myorder/dpjdd/dpjdd');
			},
			returnbtn3() {
				uni.$u.route('/pages/wpc/myorder/dsydd/dsydd');
			},
			return_btn() {
				uni.$u.route({
					url: '/pages/my/my',
					type: 'tab'
				});
			}

		}
	}
</script>

<style lang="scss">
	.bgtop {
		width: 100vw;
		background-color: #3183fc;
		height: 400rpx;
		overflow: auto;
	}

	.top {
		z-index: 3;
		width: 100vw;
		background-color: #3183fc;
		height: 150rpx;
		overflow: auto;
		position: fixed;
		top: 0;
		left: 0;

		.u-icon {
			position: fixed;
			top: 4vh;
		}
	}

	.bar {
		width: 90%;
		margin: -250rpx auto 0 auto;
		display: flex;
		justify-content: space-between;
		align-items: center;


	}

	.barinfo {
		font-size: 35rpx;
		color: #fff;
		padding: 0 10rpx 10rpx 10rpx;
		border-bottom: 5rpx transparent solid; // 默认无下划线
	}

	.barinfo.active {
		border-bottom: 5rpx #fff solid; // 选中时显示白色下划线
	}

	.card {
		width: 95%;
		box-sizing: border-box;
		// height: 450rpx;
		margin: 10px auto;
		position: relative;
		border-radius: 20rpx;
		background-color: #fff;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 6px 20px rgba(0, 0, 0, 0.1);
		padding: 30rpx 25rpx;

		.head1 {
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
	}

	.hr {
		margin-top: 30rpx;
		border: 2px solid #f3f3f3;
		border-radius: 2px;
	}

	.orderinfo1 {
		display: flex;

	}
</style>